<template>
	<view class="">
		
		<u-top-tips ref="uTips"></u-top-tips>
		
		
		<view class="bg" >
			<view class="">
				账户余额（元）
			</view>
			<view style="font-size: 80rpx;margin-top: 20rpx;">{{menony}}</view>
			
			<view style="position: absolute;right: 40rpx;top: 40rpx;">
				
					<u-button  type="success" size="mini"  shape="circle" @click="gostore">我的门店</u-button>	
			
			    
			</view>
		</view>

		<view style="padding: 30rpx;">
			<view class="" style="color: #379BFC;" @click="openAddress">
				<text style="margin-right: 10rpx;">{{address}}</text>
				<u-icon name="arrow-down-fill" color="#379BFC" size="28"></u-icon>
				<text style="margin-left: 10rpx;font-size: 24rpx;color: #F8463F;">(是否在本店铺充值)</text>
			</view>

			<view class="">
				<view class="" style="color: #333333;margin: 40rpx 0;font-size: 32rpx;font-weight: bold;">
					充值金额（元）
				</view>
				<view class="u-flex u-row-between u-flex-wrap">
					<view class="list" v-for="(item,index) in list" :key="index" :class="current==index?'change':''"
						@click="select(index)">
						<view class="">
							{{item.money}}元
						</view>
						<view class="">
							赠送：{{item.saleMoney}}元券
						</view>
					</view>
				</view>
			</view>


			<view class="" style="width:600rpx;margin:40rpx  auto 20rpx auto;text-align: center;" v-if="list.length">
				<u-checkbox shape="circle" v-model="checked"></u-checkbox>
				<text @click="look">勾选代表已阅读并同意<text style="color: #EDB56F;">《用户充值协议》</text></text>
			</view>

			<u-button @click="submit" type="primary"
				:custom-style="{width:'600rpx',marginTop:'40rpx',background:'#44BA2A'}" shape="circle"
				v-if="list.length">微信支付</u-button>



		</view>


		<u-toast ref="uToast" />


	</view>
</template>

<script>
	import url from '@/common/baseUrl.js';
	import payway from '../../common/wxpay.js';
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				imagesurl: url.imageUrl,
				menony: "",
				address: "请选择门店地址",
				list: [],
				current: 0,
				checked: false,
				storeid: "",
			}
		},
		computed:{
			...mapState(["userInfo"])
		},
		async onLoad(options) {
			if(options.q){
				let url = decodeURIComponent(options.q);
				let parms=this.getQueryString(url);
				console.log(url,'rul')
				console.log(parms,"parms")
				if(parms.id){
					await this.getStore(parms.id)
				}
				
			}else{
				await this.jiazai()
			}
			await this.recharge()
		},
		async onShow() {
			this.userInfos()
			await this.recharge()
		},
		methods: {
			
			
			getQueryString(url) {
			  let requestParams = {};
			  if (url.indexOf("?") !== -1) {
				let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串
				let strs = str.split("&"); //将字符串内容以&分隔为一个数组
				for (let i = 0; i < strs.length; i++) {
				  requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
				  // 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
				}
			  }
			  return requestParams;
			
			},
			gostore(){
				uni.navigateTo({
					url:"./storeList"
				})
			},
			select(index) {
				this.current = index
			},
			recharge() {
				return new Promise((resolve, reject) => {
					this.$u.post('/api/index/recharge', {
						store_id: this.storeid,
						
					}).then(res => {
						this.list = res;
						resolve(res)
					}).catch(err => {

					})
				})
			},

			userInfos() {
				
				return new Promise((resolve, reject) => {
					this.$u.api.userInfo().then(res => {
						this.menony = Number(res.balance).toFixed(2);
						resolve(res)
					}).catch(err => {})
				})
			},
			openAddress() {
				uni.navigateTo({
					url: "/pages/list/index"
				})
			},
			getStore(id){
				return new Promise((resolve, reject) => {
					this.$u.post('/api/index/storeDetail', {
					   store_id:id,
					   lat:this.$store.state.location.lat?this.$store.state.location.lat:0,
					   lng:this.$store.state.location.lng?this.$store.state.location.lng:0,
					}).then(res => {
						if(res.id){
							this.address = res.storeName;
							this.storeid = res.id
						}
						resolve(res)
					}).catch(err => {

					})
				})
			},
			jiazai() {
				return new Promise((resolve, reject) => {
					this.$u.post('/api/index/store', {
						lat:this.$store.state.location.lat?this.$store.state.location.lat:0,
						lng:this.$store.state.location.lng?this.$store.state.location.lng:0,
						page: 1,
						limit: 1
					}).then(res => {
						if (res.length) {
							this.address = res[0].storeName;
							this.storeid = res[0].id
						}
						resolve(res)
					}).catch(err => {

					})
				})
			},

			submit() {
			
				if (!this.checked) {
					this.$u.toast("请先阅读用户充值协议")
					return
				}
				if(!this.userInfo.mobile){
					uni.navigateTo({
						url:"../register/index?isregister=false"
					})
					return
				}

				uni.showModal({
					title: "提示",
					content: "您选择了" + this.address + '是否充值?',
					success: (res) => {
						if (res.confirm) {
							this.$u.post('/api/indent/recharge', {
								recharge_id: this.list[this.current].id,
								store_id: this.storeid
							}).then(res => {

								var packages = res.package;
								var {
									noncestr,
									timestamp,
									signtype,
									paysign
								} = res
								payway.wx(timestamp, noncestr, packages, signtype, paysign).then(
								res => {
									this.$refs.uToast.show({
										title: '充值成功',
										type: 'success',
										
									})
									this.$refs.uTips.show({
													title: '如若未开门请将车退后2m距离',
													type: 'error',
													duration: '10000'
									})
								
								}).catch(err => {

								})


							}).catch(err => {

							})
						}
					}
				})



			},
			look() {
               uni.navigateTo({
               	   url:"../help/detail?id=3"
               })
			}
		}
	}
</script>

<style>
	.bg {
		background-size: cover;
		width: 100%;
		height: 300rpx;
		display: inline-block;
		color: #FFFFFF;
		padding: 40rpx;
		position: relative;
		background:#E83814
		
	}

	.list {
		width: 309rpx;
		height: 143rpx;
		text-align: center;
		background: #F6F6F6;
		border-radius: 10rpx;
		color: #B2B2B2;
		line-height: 70rpx;
		margin-bottom: 20rpx;
	}

	.change {
		background: #379BFC;
		color: #FFFFFF;
	}
</style>
